import React, { Profiler, useState, useRef } from "react";
import create from "./zustand";

console.log("React.version", React.version);

const useCountStore = create((set, get) => ({
  count: 0,
  other: "other",
  add: () => set((store) => ({ count: store.count + 1 })),
}));

let rerenderCount = 0;
function Component1({ out }) {
  console.log("rerender", ++rerenderCount);
  const [self, setSelf] = useState(1);
  const { count, other, add } = useCountStore((store) => ({
    count: store.count,
    other: store.other,
    add: store.add,
  }));

  return (
    <>
      <ul>
        <li>rerenderCount: {rerenderCount}</li>
        <li>out: {out}</li>
        <li>
          self: {self}
          <br /> <button onClick={() => setSelf(self + 1)}>add self</button>
        </li>
        <li>
          store.count: {count} <br />{" "}
          <button onClick={add}>add store.count</button>
        </li>
        <li>store.other: {other}</li>
      </ul>
    </>
  );
}

let rerenderCount2 = 0;
function Component2() {
  console.log("rerender", ++rerenderCount2);
  const { count } = useCountStore((store) => ({
    count: store.count,
  }));

  return (
    <>
      <ul>
        <li>rerenderCount: {rerenderCount}</li>
        <li>
          store.count: {count} <br />{" "}
        </li>
      </ul>
    </>
  );
}

function App() {
  const onRender = (...props) => {
    console.log("onRender", props);
  };
  const [out, setOut] = useState(0);
  return (
    <Profiler id="App" onRender={onRender}>
      <div>
        <button onClick={() => setOut(out + 1)}>add out</button>
        <h1>Component1</h1>
        <Component1 out={out} />

        <h1>Component2</h1>
        <Component2 />
      </div>
    </Profiler>
  );
}

export default App;
